<template>
  <div class="admin">
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(233,255,238)">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-setting"></i>管理</template>
            <el-menu-item-group title="人员管理">
              <el-menu-item index="1-1-1" @click="showUserInfo">用户</el-menu-item>
              <el-menu-item index="1-1-2" @click="showLawyerInfo">律师</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="订单管理">
              <el-menu-item index="1-2-1" @click="showOrderInfo_finished">已完成</el-menu-item>
              <el-submenu index="1-2-2">
                <template slot="title">未完成</template>
                <el-menu-item index="1-2-2-1" @click="showOrderInfo_paid">已支付</el-menu-item>
                <el-menu-item index="1-2-2-2" @click="showOrderInfo_unpaid">未支付</el-menu-item>
              </el-submenu>
            </el-menu-item-group>
            <el-menu-item-group title="费用管理">
              <el-menu-item index="1-3-1" @click="showFeeInfo">收入情况</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
<!--          <el-dropdown>-->
<!--            <i class="el-icon-switch-button" style="margin-right: 15px"></i>-->
<!--            <el-dropdown-menu slot="dropdown">-->
<!--              &lt;!&ndash;需要实现页面跳转返回登录界面&ndash;&gt;-->
<!--              <el-dropdown-item @click="logout">注销</el-dropdown-item>-->
<!--            </el-dropdown-menu>-->
<!--          </el-dropdown>-->
          <el-button @click="logout" type="danger" icon="el-icon-switch-button" circle></el-button>
          <!--需要将管理员名称传过来-->
          <span>{{admin}}</span>
        </el-header>
        <el-main>
          <div v-if="userVisible" class="block" style="width: 200px; height: 45px;margin: 0 auto">
            <el-button type="danger" icon="el-icon-delete"
                       @click="deleteUser"></el-button>
          </div>
          <el-table
              v-if="userVisible"
              :data="tableData"
              height="650"
              highlight-current-row
              @row-click="storeUser"
              border style="width: 100%">
            <el-table-column
                prop="id"
                label="ID"
                width="240">
            </el-table-column>
            <el-table-column
                prop="username"
                label="姓名"
                width="240">
            </el-table-column>
            <el-table-column
                prop="nickname"
                label="昵称"
                width="240">
            </el-table-column>
            <el-table-column
                prop="type"
                label="案件类型">
            </el-table-column>
          </el-table>
          <div v-if="lawyerVisible" class="block" style="width: 200px; height: 45px;margin: 0 auto">
            <el-button type="danger" icon="el-icon-delete"
                       @click="deleteLawyer"></el-button>
          </div>
          <el-table
              v-if="lawyerVisible"
              :data="tableData"
              height="650"
              highlight-current-row
              @row-click="storeLawyer"
              border style="width: 100%">
            <el-table-column
                prop="id"
                label="ID"
                width="200">
            </el-table-column>
            <el-table-column
                prop="lawyer_username"
                label="用户名"
                width="200">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="200">
            </el-table-column>
            <el-table-column
                prop="age"
                label="年龄"
                width="200">
            </el-table-column>
            <el-table-column
                prop="gender"
                label="性别"
                width="200">
            </el-table-column>
            <el-table-column
                prop="worktime"
                label="工作时间"
                width="200">
            </el-table-column>
            <el-table-column
                prop="cases"
                label="案件数量"
                width="200">
            </el-table-column>
            <el-table-column
                prop="descrip"
                label="介绍"
                width="240">
            </el-table-column>
            <el-table-column
                prop="casetype"
                label="案件类型">
            </el-table-column>
          </el-table>
          <div v-if="orderVisible_finished" class="block" style="width: 200px; height: 45px;margin: 0 auto">
            <el-button type="danger" icon="el-icon-delete"
                       @click="deleteOrder"></el-button>
          </div>
          <el-table
              v-if="orderVisible_finished"
              :data="finishedTable"
              height="650"
              highlight-current-row
              @row-click="storeOrder"
              border style="width: 100%">
            <el-table-column
                prop="order_id"
                label="订单ID"
                width="200">
            </el-table-column>
            <el-table-column
                prop="user_id"
                label="用户ID"
                width="200">
            </el-table-column>
            <el-table-column
                prop="lawyer_id"
                label="律师ID"
                width="200">
            </el-table-column>
            <el-table-column
                prop="order_descrip"
                label="订单描述"
                width="200">
            </el-table-column>
            <el-table-column
                prop="order_type"
                label="订单类型"
                width="200">
            </el-table-column>
            <el-table-column
                prop="order_amount"
                label="订单金额"
                width="200">
            </el-table-column>
            <el-table-column
                prop="done"
                label="订单状态"
                width="200">
            </el-table-column>
            <el-table-column
                prop="paid"
                label="订单是否支付"
                width="200">
            </el-table-column>
            <el-table-column
                prop="start"
                label="下单时间"
                width="200">
            </el-table-column>
            <el-table-column
                prop="end"
                label="结束时间"
                width="200">
            </el-table-column>
          </el-table>
          <div v-if="orderVisible_paid" class="block" style="width: 200px; height: 45px;margin: 0 auto">
            <el-button type="danger" icon="el-icon-delete"
                       @click="deleteOrder"></el-button>
          </div>
          <el-table
              v-if="orderVisible_paid"
              :data="unfinishedButPaidTable"
              height="650"
              highlight-current-row
              @row-click="storeOrder"
              border style="width: 100%">
            <el-table-column
                prop="order_id"
                label="订单ID"
                width="200">
            </el-table-column>
            <el-table-column
                prop="user_id"
                label="用户ID"
                width="200">
            </el-table-column>
            <el-table-column
                prop="lawyer_id"
                label="律师ID"
                width="200">
            </el-table-column>
            <el-table-column
                prop="order_descrip"
                label="订单描述"
                width="200">
            </el-table-column>
            <el-table-column
                prop="order_type"
                label="订单类型"
                width="200">
            </el-table-column>
            <el-table-column
                prop="order_amount"
                label="订单金额"
                width="200">
            </el-table-column>
            <el-table-column
                prop="done"
                label="订单状态"
                width="200">
            </el-table-column>
            <el-table-column
                prop="paid"
                label="订单是否支付"
                width="200">
            </el-table-column>
            <el-table-column
                prop="start"
                label="下单时间"
                width="200">
            </el-table-column>
            <el-table-column
                prop="end"
                label="结束时间"
                width="200">
            </el-table-column>
          </el-table>
          <div v-if="orderVisible_unpaid" class="block" style="width: 200px; height: 45px;margin: 0 auto">
            <el-button type="danger" icon="el-icon-delete"
                       @click="deleteOrder"></el-button>
          </div>
          <el-table
              v-if="orderVisible_unpaid"
              :data="unfinishedAndUnpaidTable"
              height="650"
              highlight-current-row
              @row-click="storeOrder"
              border style="width: 100%">
            <el-table-column
                prop="order_id"
                label="订单ID"
                width="200">
            </el-table-column>
            <el-table-column
                prop="user_id"
                label="用户ID"
                width="200">
            </el-table-column>
            <el-table-column
                prop="lawyer_id"
                label="律师ID"
                width="200">
            </el-table-column>
            <el-table-column
                prop="order_descrip"
                label="订单描述"
                width="200">
            </el-table-column>
            <el-table-column
                prop="order_type"
                label="订单类型"
                width="200">
            </el-table-column>
            <el-table-column
                prop="order_amount"
                label="订单金额"
                width="200">
            </el-table-column>
            <el-table-column
                prop="done"
                label="订单状态"
                width="200">
            </el-table-column>
            <el-table-column
                prop="paid"
                label="订单是否支付"
                width="200">
            </el-table-column>
            <el-table-column
                prop="start"
                label="下单时间"
                width="200">
            </el-table-column>
            <el-table-column
                prop="end"
                label="结束时间"
                width="200">
            </el-table-column>
          </el-table>
          <div v-if="feeVisible" class="block" style="width: 650px; height: 45px;margin: 0 auto">
            <el-tag>下单时间范围：</el-tag>
            <el-date-picker
                v-model="selectTime"
                type="datetimerange"
                align="right"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>
            <el-button type="danger" icon="el-icon-delete"
                       @click="deleteOrder"></el-button>
          </div>
          <el-table
              v-if="feeVisible"
              :data="feeTable"
              height="600"
              border style="width: 100%"
              highlight-current-row
              @row-click="storeOrder">
            <el-table-column
                prop="order_id"
                label="订单ID"
                width="200">
            </el-table-column>
            <el-table-column
                prop="user_id"
                label="用户ID"
                width="200">
            </el-table-column>
            <el-table-column
                prop="lawyer_id"
                label="律师ID"
                width="200">
            </el-table-column>
            <el-table-column
                prop="order_descrip"
                label="订单描述"
                width="200">
            </el-table-column>
            <el-table-column
                prop="order_type"
                label="订单类型"
                width="200">
            </el-table-column>
            <el-table-column
                prop="order_amount"
                label="订单金额"
                width="200">
            </el-table-column>
            <el-table-column
                prop="done"
                label="订单状态"
                width="200">
            </el-table-column>
            <el-table-column
                prop="paid"
                label="订单是否支付"
                width="200">
            </el-table-column>
            <el-table-column
                prop="start"
                label="下单时间"
                width="200">
            </el-table-column>
            <el-table-column
                prop="end"
                label="结束时间"
                width="200">
            </el-table-column>
          </el-table>
          <el-card v-if="feeVisible" class="box-card" style="height: 45px">
            <i class="el-icon-money">总收入:{{sumMoney}}</i>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style>
.el-header {
  background-color: #9dbad1;
  color: #ffd370;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.admin {
  margin: 0 auto;
  width: 80%;
  height: 800px;
}


</style>

<script>
import axios from "axios";
/*日期格式化*/
var formatDateTime = function (date) {
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  m = m < 10 ? ('0' + m) : m;
  var d = date.getDate();
  d = d < 10 ? ('0' + d) : d;
  var h = date.getHours();
  h = h < 10 ? ('0' + h) : h;
  var minute = date.getMinutes();
  minute = minute < 10 ? ('0' + minute) : minute;
  var second = date.getSeconds();
  second = second < 10 ? ('0' + second) : second;
  return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
};
/*确定日期是否在范围之内*/
var isDuringDate = function (curDate, beginDate, endDate) {
  if (curDate >= beginDate && curDate <= endDate) {
    return true;
  }
  return false;
};
/*布尔值格式化：cellValue为后台返回的值
*/
var formatBoolean = function (cellValue) {
  var ret = ''  //你想在页面展示的值
  if (cellValue) {
    ret = "是"  //根据自己的需求设定
  } else {
    ret = "否"
  }
  return ret;
}
export default {
  created() {
    axios
        .get('http://localhost:8080/user/findAllUser')
        .then(response => {
          this.tableData = response.data
        })
        .catch(function (error) { // 请求失败处理
          console.log(error);
        });
  },
  data() {
    return {
      tableData: [],
      admin: "admin",
      userVisible: true,
      lawyerVisible: false,
      orderVisible_finished: false,
      orderVisible_paid: false,
      orderVisible_unpaid: false,
      feeVisible: false,
      userId:"",
      lawyerId:"",
      orderId:"",
      selectTime: [new Date(2020, 11, 7, 0, 0), new Date(2020, 11, 18, 23, 59, 59)],
    }
  },
  methods: {
    showUserInfo() {
      this.userVisible = true;
      this.lawyerVisible = false;
      this.orderVisible_finished = false;
      this.orderVisible_paid = false;
      this.orderVisible_unpaid = false;
      this.feeVisible = false;
      axios
          .get('http://localhost:8080/user/findAllUser')
          .then(response => {
            this.tableData = response.data
            console.log(this.tableData)
          })
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
    },
    showLawyerInfo() {
      this.userVisible = false;
      this.lawyerVisible = true;
      this.orderVisible_finished = false;
      this.orderVisible_paid = false;
      this.orderVisible_unpaid = false;
      this.feeVisible = false;
      axios
          .get('http://localhost:8080/lawyer/findAllLawyer')
          .then(response => {
            this.tableData = response.data
          })
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
    },
    showOrderInfo_finished() {
      this.userVisible = false;
      this.lawyerVisible = false;
      this.orderVisible_finished = true;
      this.orderVisible_paid = false;
      this.orderVisible_unpaid = false;
      this.feeVisible = false;
      axios
          .get('http://localhost:8080/order/findAllOrder')
          .then(response => {
            this.tableData = response.data
            this.tableData.forEach(item => {
              item.done = formatBoolean(item.done)
              item.paid = formatBoolean(item.paid)
              item.start = formatDateTime(new Date(item.start))
              item.end = formatDateTime(new Date(item.end))
            })
          })
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
    },
    showOrderInfo_paid() {
      this.userVisible = false;
      this.lawyerVisible = false;
      this.orderVisible_finished = false;
      this.orderVisible_paid = true;
      this.orderVisible_unpaid = false;
      this.feeVisible = false;
      axios
          .get('http://localhost:8080/order/findAllOrder')
          .then(response => {
            this.tableData = response.data
            this.tableData.forEach(item => {
              item.done = formatBoolean(item.done)
              item.paid = formatBoolean(item.paid)
              item.start = formatDateTime(new Date(item.start))
              item.end = formatDateTime(new Date(item.end))
            })
          })
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
    },
    showOrderInfo_unpaid() {
      this.userVisible = false;
      this.lawyerVisible = false;
      this.orderVisible_finished = false;
      this.orderVisible_paid = false;
      this.orderVisible_unpaid = true;
      this.feeVisible = false;
      axios
          .get('http://localhost:8080/order/findAllOrder')
          .then(response => {
            this.tableData = response.data
            this.tableData.forEach(item => {
              item.done = formatBoolean(item.done)
              item.paid = formatBoolean(item.paid)
              item.start = formatDateTime(new Date(item.start))
              item.end = formatDateTime(new Date(item.end))
            })
          })
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
    },
    showFeeInfo() {
      this.userVisible = false;
      this.lawyerVisible = false;
      this.orderVisible_finished = false;
      this.orderVisible_paid = false;
      this.orderVisible_unpaid = false;
      this.feeVisible = true;
      axios
          .get('http://localhost:8080/order/findAllOrder')
          .then(response => {
            this.tableData = response.data
            console.log(this.tableData)
            this.tableData.forEach(item => {
              item.done = formatBoolean(item.done)
              item.paid = formatBoolean(item.paid)
              item.start = formatDateTime(new Date(item.start))
              item.end = formatDateTime(new Date(item.end))
            })
          })
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
    },
    storeUser(val){
      console.log(val.id);
      this.userId=val.id;
    },
    storeLawyer(val){
      console.log(val.id);
      this.lawyerId=val.id;
    },
    storeOrder(val){
      console.log(val.order_id);
      this.orderId=val.order_id;
    },
    deleteUser() {
      console.log(this.userId);
      axios
          .get('http://localhost:8080/user/deleteUserById?id=' + this.userId)
          .then(response => {
            console.log(response.data)
            this.tableData = this.tableData.filter(item => item.id !== this.userId)
          })
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
    },
    deleteLawyer() {
      console.log(this.lawyerId);
      axios
          .get('http://localhost:8080/lawyer/deleteLawyerById?id=' + this.lawyerId)
          .then(response => {
            console.log(response.data)
            this.tableData = this.tableData.filter(item => item.id !== this.lawyerId)
          })
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
    },
    deleteOrder() {
      console.log(this.orderId);
      axios
          .get('http://localhost:8080/order/deleteOrderById?order_id=' + this.orderId)
          .then(response => {
            console.log(response.data)
            this.tableData = this.tableData.filter(item => item.order_id !== this.orderId)
          })
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
    },
    /*注销跳转*/
    logout(){
      window.location = "index.html"
    },
  },
  computed: {
    feeTable() {
      return this.tableData
          .filter(item => isDuringDate(item.start, formatDateTime(new Date(this.selectTime[0])), formatDateTime(new Date(this.selectTime[1]))));
    },
    sumMoney() {
      let sum = 0;
      this.tableData
          .filter(item => isDuringDate(item.start, formatDateTime(new Date(this.selectTime[0])), formatDateTime(new Date(this.selectTime[1]))))
          .filter(item => item.paid === '是')
          .forEach(item => sum = sum + item.order_amount);
      return sum;
    },
    finishedTable() {
      return this.tableData
          .filter(item => item.done === '是');
    },
    unfinishedButPaidTable() {
      return this.tableData
          .filter(item => item.done === '否')
          .filter(item => item.paid === '是');
    },
    unfinishedAndUnpaidTable() {
      return this.tableData
          .filter(item => item.done === '否')
          .filter(item => item.paid === '否');
    }
  }
};
</script>